<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/meter.css">
	<link rel="stylesheet" href="css/iview.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body style="background: #01060c;">
<div id="cps">
	<!--顶条-->
	<div class="top-boder" >
		<div class="top clearfix">
			<p class="fl"><a href="javascript:;" class="logo">哈电集团多能互补远程运维系统</a></p>
			<!--导航栏-->
			<ul class="fl banner" >
				<li class="fl">
					<a href="JavaScript:;">
						<i class="fan_icon"></i>
						<em>风场状态概览</em>
					</a>
				</li>
				<li  class="fl tool">
					<a href="html/fan.html">
						<i class="fan_icon"></i>
						<em>健康状态分析  </em>
					</a>
				</li>
			</ul>
		</div>
	</div>

	<!--中部content-->
	<article class="clearfix">
		<div class="content">
			<!--中部总体信息-->
			<div class="fl meter" id="meter">
				<div class="meter_t">
					<h5 class="title">绩效仪表盘</h5>
					<ul class="meter_pie clearfix">
						<li class="fl">
							<div class="chartbox">
								<i-circle :percent="Number(powerFactor)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#2cb1e4" :trail-width="12" :stroke-width="12">
									<span class="demo-Circle-inner" style="color:#2cb1e4; font-size:24px;line-height: 160px;">    {{powerFactor}}%</span>
								</i-circle>
							</div>
							<p>功率因数</p>
						</li>
						<li class="fl">
							<div class="chartbox">
								<i-circle :percent="Number(lower)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#7db349" :trail-width="12" :stroke-width="12">
									<span class="demo-Circle-inner" style="color:#7db349; font-size:24px;line-height: 160px;">{{lower}}%</span>
								</i-circle>
							</div>
							<p>发电损失率</p>
						</li>
						<li class="fl">
							<div class="chartbox">
								<i-circle :percent="Number(powergrid)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#4fb053" :trail-width="12" :stroke-width="12">
									<span class="demo-Circle-inner" style="color:#4fb053; font-size:24px;line-height: 160px;">{{powergrid}}%</span>
								</i-circle>
							</div>
							<p>电网调度<br/>匹配率</p>
						</li>
						<li class="fl">
							<div class="chartbox">
								<i-circle :percent="Number(fanUsage)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#7db349" :trail-width="12" :stroke-width="12">
									<span class="demo-Circle-inner" style="color:#7db349; font-size:24px;line-height: 160px;">{{fanUsage}}%</span>
								</i-circle>
							</div>
							<p>风机使用率</p>
						</li>
						<li class="fl">
							<p class="p1 kw">{{powerGeneration}}<em>kwh</em></p>
							<p>累计发电量</p>
						</li>
						<li class="fl">
							<p class="p1 rmb">0.56<em>RMB/kwh</em></p>
							<p>发电成本</p>
						</li>
					</ul>
				</div>
			</div>
			<!--map-->
			<div class="map fl">
				<h5 class="title">风场总体信息</h5>
				<div class="map_i clearfix">
					<ul class="map_u fl">
						<li class="fl  map_ui">
							<p class="math">{{datalist.windSpeed5m}}<em> m/s</em></p>
							<p class="fl math_i">风机风速</p>
						</li>
						<li class="fl  map_ui">
							<p class="math">{{alarmStatus}}</p>
							<p class="fl math_i">报警状态</p>
						</li>
						<li class="fl  map_ui">
							<p class="math">{{datalist.windDirection}}<em> 度</em></p>
							<p class="fl math_i" >风   向</p>
						</li>
						<li class="fl  map_ui">
							<p class="math">{{datalist.outputPower}}<em> KW</em></p>
							<p class="fl math_i">输出功率</p>
						</li>
						<li class="fl  map_ui">
							<p class="math">{{datalist.bladeAngle}}<em> 度</em></p>
							<p class="fl math_i">叶片角度</p>
						</li>
						<li class="fl  map_ui">
							<p class="math">{{datalist.revolutionPerMin}}<em> rpm</em></p>
							<p class="fl math_i">风轮发电转速</p>
						</li>
					</ul>
					<ul class="map_con fl" id="map_con">
						<li><a href="html/fan.html" class="tooltip">
							<span class="run"></span>
							<span></span>
						</a></li>
						<li>大丰区</li>
					</ul>
					<div id="map_var">
						<div id='tooltip'>
							<h5 class="title"> 号风机</h5>
							<ul>
								<li class='clearfix'><p class='fl'></p><i class='fl'>当前健康值</i><em class='fr'>1</em></li>
								<li class='clearfix'><p class='fl'></p><i class='fl'>当前发电损失率</i><em class='fr'> {{lower}}%</em></li>
								<li class='clearfix'><p class='fl'></p><i class='fl'>当前时间</i><em class='fr'>{{datatime}}</em></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</article>
	<div class="footer">
		<div class="footer-content clearfix">
			<div class="fl footer-content-chart">
				<h3 class="color-w footer-title      title">功率因数</h3>
				<div class="chart-his">
					<!--<chart-component v-if="Object.keys(chartdata).length != 0" :subchart="chartdata"></chart-component>-->
					<chart-component>
						<p slot="line" name="功率因数" type="line" itemurl='?code=2' timing="1000" params="1" linecolor="#119c64"></p>

					</chart-component>
				</div>
			</div>
			<div class="fl footer-content-chart mar">
				<h3 class="color-w footer-title title">风场风机状态</h3>
				<div class="chart-his">
					<chartline-component ></chartline-component>
					<!--<chart-component>
						<p slot="line" name="风速" type="line" itemurl='/msg.json' timing="1000" params="1" linecolor="#54abe8"></p>
						<p slot="line" name="发电量" type="line" itemurl='/tsconfig.json' timing="1000" params="1" linecolor="#119c64"></p>
					</chart-component>-->
				</div>
			</div>
		</div>

	</div>
</div>


<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/iview.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/index.js"></script>
<script src="js/common.js"></script>
<!--<script src="js/chart.js"></script>-->

<!--<script src="js/fan.js"></script>-->
<script>

</script>
</body>

</html>